<template>
	<view class="container">
		<view class="content">
			<!--一个订单信息-->
			<view class="order" v-for="(item, idx) in orderList" :key="idx" @tap="gotoNextPage(item)">
				<view class="up">
					<view class="time">
						{{ formatDatetime(item.orderTime) }}
					</view>
				</view>
				<view class="down">
					<view class="start-and-end">
						<view class="start">
							<view class="dot green"></view>
							<view class="text">{{ item.currentAddr }}</view>
						</view>
						<view class="end">
							<view class="dot red"></view>
							<view class="text">{{ item.targetAddr }}</view>
						</view>
					</view>
					<view class="status">
						<text>{{ getTypeNameByCode(item.status) }}</text>
						<uni-icons type="right" size="15" color="#888"></uni-icons>
					</view>
				</view>
			</view>
		
			<!-- 空状态 -->
			<view class="empty" v-if="orderList.length === 0">
				<image src="/static/imgs/empty.png" mode="aspectFit" alt="暂无订单"></image>
				<text>暂无订单</text>
			</view>
			<!--加载更多-->
			<view class="loading-container" v-else>
				<uni-load-more 
					iconType="circle"
					:status="nomore ? 'nomore' : 'loading'" 
					:content-text="{contentrefresh: '正在加载...', contentnomore: '- 到底了 -'}"
				/>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import { getOrderList } from '@/api/order.js'
import { getTypeNameByCode, orderTypeEnum } from '@/utils/orderType.js'
import { formatDatetime } from '@/utils/datetimeUtil.js'

const page = reactive({
	pageSize: 10,
	pageNum: 1
})
const nomore = ref(false)

const orderList = ref([])
/*
	{
		"id": "202508021656491633",
		"businessType": 0,
		"currentLo": 113.36199,
		"currentLa": 23.12463,
		"currentAddr": "广东省广州市天河区天府路1号",
		"targetLo": 116.39747,
		"targetLa": 39.908823,
		"targetAddr": "天安门",
		"orderTime": "2025-08-02T08:56:49.000+00:00",
		"hopeTime": "2025-08-02T08:56:18.000+00:00",
		"startTime": null,
		"endTime": null,
		"price": 10665,
		"userId": "1",
		"userPhone": "13412341234",
		"driverId": null,
		"status": 1
	}
 */

function gotoNextPage (order) {
	if (order.status === orderTypeEnum.PENDING_PAY.code) {
		uni.navigateTo({
			url: `/pages/order/pay?id=${order.id}`
		})
	} else {
		uni.navigateTo({
			url: `/pages/order/wait?id=${order.id}`
		})
	}
}

function resetPage () {
	page.pageNum = 1
	nomore.value = false
	orderList.value = []
}

function getPage () {
	return new Promise((resolve, reject) => {
		if (nomore.value) {
			resolve()
		} else {
			getOrderList(page).then(res => {
				orderList.value = [ ...orderList.value, ...res.data.records ]
				if (page.pageNum < res.data.pages) {
					// 页码+1
					page.pageNum++
				} else {
					// 没有下一页了
					// console.log('没了')
					nomore.value = true
				}
				resolve()
			}).catch(err => {
				reject()
			})
		}
	})
}

onMounted(() => {
	getPage()
	// 监听用户取消订单
	uni.$on('user-update-order-status', ({ id, status }) => {
		const order = orderList.value.find(o => o.id === id)
		if (order) {
			order.status = status
		}
	})
})
	
onReachBottom(() => {
	// console.log('触底了...')
	getPage()
})

onPullDownRefresh(() => {
	uni.showLoading({
		mask: true,
		title: '加载中...'
	})
	resetPage()
	getPage().then(() => {
		uni.stopPullDownRefresh()
		uni.hideLoading()
	})
})
</script>

<style lang="scss" scoped>
view {
	box-sizing: border-box;
}
.container {
	width: 100vw;
	height: 100vh;
	background-color: #f8f8f8;
	.content {
		width: 100%;
		background-color: #f8f8f8;
		padding: 30rpx;
		.order {
			// 上
			width: 100%;
			padding: 30rpx 15rpx;
			// background-color: #ddd;
			border-bottom: 1rpx solid #ddd;
			&:last-child {
				border-bottom: none;
			}
			.up {
				// 时间
				.time {
					font-size: 24rpx;
				}
			}
			// 下
			.down {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				// 左(起点和终点)
				.start-and-end {
					&>view {
						margin-top: 20rpx;
						font-size: 28rpx;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						.dot {
							width: 18rpx;
							height: 18rpx;
							border-radius: 50%;
							margin-right: 15rpx;
						}
						.green {
							background-color: #00b400;
						}
						.red {
							background-color: #d60000;
						}
						.text {
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							width: 400rpx;
						}
					}
					.start {
					}
					.end {
					}
				}
				// 支付状态
				.status {
					flex: 1;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					font-size: 30rpx;
					color: #888;
				}
			}
		}
	
		.empty {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 70vh;
		
			image {
				width: 500rpx;
				height: 500rpx;
				margin-bottom: 30rpx;
				opacity: 0.6;
			}
		
			text {
				color: #666;
				font-size: 28rpx;
			}
		}
		
		.loading-container {
			padding-top: 15rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>